import React, { useState } from 'react'
import "./TodoHeader.css"
export default function TodoHeader(props) {

    //解构赋值
    let {addTodo} = props;

    //声明输入框值得状态
    let [title,setTitle] = useState("");

    // 获取输入框值得方法
    let getValue = (e) =>{
        // console.log(e.target.value);
        //更新状态
        setTitle(e.target.value);
    }

    //创建 键盘 方法
    let keyup = (e) => {
        if(e.keyCode === 13 && title.length !== 0){
            //添加数据
            addTodo(e.target.value);
            //清空输入框的数据
            setTitle("");
        }
       
    }


    return (
        <div className="todo-header">
            <input value={title}  onKeyUp={keyup}  onChange={getValue} type="text" placeholder="请输入你的任务名称，按回车键确认" />
        </div>
    )
}
